<div class="box-container">
    <p class="process-bar" (click)="openProgressModal()">
        <b><i nz-icon nzType="clock-circle" nzTheme="fill" class="yellow"></i> &nbsp;报送进度:</b>&nbsp;
        已报/未报:&nbsp;
        <span class="green">{{reportFinished}}</span>/
        <span class="red">{{reportUnfinished}}</span>&nbsp;
        <span class="green">（占比{{reportPercentage}}%）</span>&nbsp;
    </p>
    <div class="main-content">
        <div class="main-content-wrap">
            <div class="right-panel">
                <div class="right-top-box">
                    <div class="content-top-bar">
                        <form nz-form [nzLayout]="'inline'" [formGroup]="searchForm">
                            <nz-form-item>
                                <nz-form-label>年份</nz-form-label>
                                <nz-form-control>
                                    <nz-year-picker formControlName="year" (ngModelChange)="queryInfo(true)">
                                    </nz-year-picker>
                                </nz-form-control>
                            </nz-form-item>
                            <nz-form-item>
                                <nz-form-label>单位</nz-form-label>
                                <nz-form-control>
                                    <nz-input-group>
                                        <input type="text" nz-input formControlName="name" placeholder="关键字"/>
                                    </nz-input-group>
                                </nz-form-control>
                            </nz-form-item>
                            <nz-form-item>
                                <nz-form-control>
                                    <button nz-button nzType="primary" (click)="queryInfo(true)">
                                        <i nz-icon nzType="search"></i>搜索
                                    </button>
                                </nz-form-control>
                            </nz-form-item>
                        </form>


                        <div class="custom-btn-group">
                            <!--<a class="top-bar-btn" (click)="openDetailModal()">-->
                            <!--<i nz-icon nzType="history" nzTheme="outline"></i> 历史记录-->
                            <!--</a>-->
                            <a class="top-bar-btn" (click)="export()">
                                <i nz-icon nzType="file-excel" nzTheme="outline"></i> 导出
                            </a>
                            <!--<a class="top-bar-btn" (click)="print()">-->
                            <!--<i nz-icon nzType="printer" nzTheme="outline"></i>-->
                            <!--</a>-->
                        </div>

                    </div>

                    <div class="right-top-content">
                        <div style="width: 100%">
                            <nz-table
                                #groupingTable
                                class="main-table"
                                [nzData]="monthlyTableData"
                                nzBordered
                                nzSize="middle"
                                [nzFrontPagination]="false"
                                [nzTotal]="total"
                                [(nzPageIndex)]="pageNum"
                                [nzPageSize]="pageSize"
                                (nzPageIndexChange)="queryInfo()">
                                <thead>
                                <tr class="custom-head">
                                    <th>单位</th>
                                    <th>1月</th>
                                    <th>2月</th>
                                    <th>3月</th>
                                    <th>4月</th>
                                    <th>5月</th>
                                    <th>6月</th>
                                    <th>7月</th>
                                    <th>8月</th>
                                    <th>9月</th>
                                    <th>10月</th>
                                    <th>11月</th>
                                    <th>12月</th>
                                    <th>合计</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr *ngFor="let data of groupingTable.data;let idx = index" [class]="{'even':idx % 2 === 1}" (click)="selectedRow(data)">
                                    <td>{{ data.trIndName }}</td>
                                    <td>{{ data.janMwo }}</td>
                                    <td>{{ data.febMwo }}</td>
                                    <td>{{ data.marMwo }}</td>
                                    <td>{{ data.aprMwo }}</td>
                                    <td>{{ data.mayMwo }}</td>
                                    <td>{{ data.junMwo }}</td>
                                    <td>{{ data.julMwo }}</td>
                                    <td>{{ data.augMwo }}</td>
                                    <td>{{ data.sepMwo }}</td>
                                    <td>{{ data.octMwo }}</td>
                                    <td>{{ data.novMwo }}</td>
                                    <td>{{ data.decMwo }}</td>
                                    <td>{{ data.total }}</td>
                                </tr>
                                </tbody>
                            </nz-table>
                        </div>
                    </div>
                </div>
                <div class="right-bottom-box">
                    <div class="charts-container">
                        <div echarts [options]="basicOpts" [merge]="customOpts" class="charts-cell"></div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
<nz-modal class="custom-modal" nzWidth="900" [(nzVisible)]="progressModalShow" nzTitle="工业取水报送情况"
          (nzOnCancel)="closeProgressModal()" [nzFooter]="null">
    <nz-table
        #dataTable
        nzBordered
        nzShowPagination
        [nzPageSize]="10"
        [nzData]="progressData"
        nzSize="middle">
        <thead>
        <tr>
            <th>管理处</th>
            <th>报送状态</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let row of dataTable.data">
            <td>{{ row.frName }}</td>
            <td [ngClass]="{'green': row.statu === 2, 'red': row.statu === 1}">{{ row.status }}</td>
            <td>
                <a class="red"
                   style="text-decoration: solid"
                   *ngIf="row.statu === 1"
                   (click)="broadcast()">通知</a>
            </td>
        </tr>
        </tbody>
    </nz-table>
</nz-modal>
